import "@/assets/style.scss"
import PropTypes from "prop-types"
import { useState } from "react";

function Footer(props) {
    let { type, children, onClick } = props;
    return (
        <div className="ml-button">
            <span className={type} onClick={onClick}>{children}</span>
        </div>
    )
}
Footer.propTypes = {
    type: PropTypes.oneOf(["default", "primary", "danger", "info"]),
    children: PropTypes.node,
    onClick: PropTypes.func
}
Footer.defaultProps = {
    type: 'default',
    children: '按钮',
    onClick: () => { }
}

function Modal(props) {

    let { title, closable, children, type, flag, onClick, onConfirm } = props;

    // 底部渲染函数
    let renderFooter = () => {
        let btns = []
        switch (type) {
            case "confirm":
                btns = [
                    <Footer type="primary" key="1" onClick={onConfirm}>确定</Footer>,
                    <Footer key="2" onClick={onClick}>取消</Footer>
                ]
                break;
            case "danger":
                btns = [
                    <Footer type="danger" key="1" onClick={onConfirm}>删除</Footer>,
                    <Footer key="2" onClick={onClick}>取消</Footer>
                ]
                break;
            case "info":
                btns = [
                    <Footer type="info" key="1" onClick={onClick}>Got it!</Footer>,
                ]
                break;
        }
        return btns;
    }

    // 点击遮罩层关闭弹出框
    let handler = (e) => {
        // console.log("e.currentTarget", e.currentTarget);
        // console.log("e.target", e.target);
        const layer = document.getElementsByClassName('ml-layer')[0]
      
        if (e.target ==layer) {
            onClick()
        }
    }
    return (
        <>
            {flag && <div className="ml-layer" onClick={handler}>
                <div className="ml-modal">
                    <header>
                        <div>
                            <div>{title}</div>
                            <div onClick={onClick}>{closable && "×"}</div>
                        </div>

                    </header>
                    <main>
                        {children}
                    </main>
                    <footer>
                        {renderFooter()}
                    </footer>
                </div>
            </div>}
        </>


    )
}


Modal.propTypes = {
    title: PropTypes.elementType, // jsx, string, null,und, func
    closable: PropTypes.bool,
    children: PropTypes.node,
    type: PropTypes.oneOf(["confirm", "danger", "info"]),
    flag: PropTypes.bool,
    onClick: PropTypes.func,
    onConfirm: PropTypes.func,

}

Modal.defaultProps = {
    title: "默认小标题",
    closable: true,
    children: <div>主体内容默认值</div>,
    type: "info",
    flag: false,
    onClick: () => { },
    onConfirm: () => { },
}





function Page() {
    // 控制弹出框出现或隐藏
    let [flag, setFlag] = useState(false);

    let onConfirm = () => {
        console.log('confirm...');
        setTimeout(()=> {
            console.log('请求数据...');
            setFlag(flag=false)
        },500)
    }

    return (
        <div>
            <button onClick={()=>setFlag(flag = true)}>打开弹窗</button>
            <Modal
                title={"添加用户"}
                closable
                type="confirm"
                flag={flag}
                onClick={() => setFlag(flag = false)}
                onConfirm={onConfirm}
            >
                <div>
                    <input type="text" />
                    <div>确定要添加此用户吗?</div>
                </div>
            </Modal>
        </div>
    )
}

export default Page